<template>
    <div class="h100p w75 bgc-eb t12">
        <div
            v-for="item,index in listItem"
            :key="index"
            @click="clickItem(item,index)"
            class="w100p h60 fxcyc tc-c4 bsb px5"
            mox-class="[active] bgc-f bdl4-dbaa6a"
            :class="{active: index == acindex}"
        >{{item.text}}</div>
    </div>
</template>

<script>
export default {
    name: 'GoodsLeft',
    data(){
        return {
            acindex: 0,
            listItem: [
                {text:'当季限定', key:'a'},
                {text:'人气必喝榜', key:'b'},
                {text:'每日鲜食', key:'c'},
                {text:'灵感甜品', key:'d'},
                {text:'热饮推荐', key:'e'},
                {text:'水果家族', key:'f'},
                {text:'爆柠/油柑家族', key:'g'},
                {text:'喜茶咖啡', key:'h'},
                {text:'喜茶', key:'i'},
            ]
        }
    },
    methods: {
        clickItem(item, index){
            this.acindex = index
            this.$emit('click-item', item)
        },
    },
};
</script>

<style lang='scss' scoped>
</style>